/*
 * @Author: OreoWang
 * @Email: ihc523@163.com
 * @Date: 2020-06-01 12:05:23
 * @LastEditors: OreoWang
 * @LastEditTime: 2022-08-10 16:40:57
 * @Description: 数据模型
 */

import { logger } from "../core/ViewLogger";
import ViewModel, { ViewData } from "../core/ViewModel";
import ExampleController from "./ExampleController";
import ExampleView from "./ExampleView";
import IViewRender from "../core/IViewRender";


/**
 * 数据
 * @description 可参考 ExampleModel.ts 中的使用示例
 */
 export class ModelData extends ViewData {
    strName = ""; 
    strPwd = "";
    strComputed = "";
    isRemember = false;
    json = {
        k1: "v1",
        k2: "v2",
    };
}


/**
 * 模型
 * @description 可参考 ExampleModel.ts 中的使用示例
 */
 export default class ExampleModel extends ViewModel {
    compile(controller: ExampleController, view: ExampleView, data: ModelData): IViewRender{
        return {
            /**
             * 数据模型（必需）
             */
             data: data,

             /**
              * 模型绑定（必需）
              * @description template 中的 key ，可选值对应 data 中的 key 和 computed 中的 key 值；
              * @description template 中的 value, 指定绑定 view 中的属性，需要绑定多个时可以使用数组。
              */
             template: {
                 strName: view.editName,//支持单个控件绑定
                 strPwd: [view.editPassword, view.labPassword], //支持多个控件绑定
                 isRemember: view.togRemember,
                 strComputed: view.labComputed,
                 
                 // 绑定 computed 计算属性
                 hello_world: [view.labComputed], //hello_world 为 computed（计算属性） 中的key
                 computed_richtext: view.richText,//同上
             },
 
             /**
              * 计算属性（可选）
              * @description https://staging-cn.vuejs.org/guide/essentials/computed.html
              */
             computed: {
                 // HelloWorld 的值通过引用依赖计算 data.strName + data.strPwd 得到， 
                 // data 中相应的值改变时，计算属性的结果也会改变
                 hello_world: function (vm: ModelData) {
                     let text = vm.strName + '+' + vm.strPwd;
                     console.log("computed.hello_world: ", text);
                     return text;
                 },
                 computed_richtext: function (vm: ModelData) {
                     let json = JSON.stringify(data, null, 4);
                     return json;
                 },
             },
 
             /**
              * 监听属性（可选），回调优先级比计算属性高
              * @description https://staging-cn.vuejs.org/guide/essentials/watchers.html
              */
             watch: {
                 //监听 data.strName 的值改变消息
                 strName: function(value: any, oldValue: any) {
                     controller.onValueChange("strName", value, oldValue);
                 },
                 strPwd: function(value: any, oldValue: any) {
                     controller.onValueChange("strPwd", value, oldValue);
                 },
                 isRemember: function(value: any, oldValue: any) {
                     controller.onValueChange("isRemember", value, oldValue);
                 },
                 'json.k1': function(value: any, oldValue: any) {
                     logger.log("支持多级属性监听");
                     controller.onValueChange("isRemember", value, oldValue);
                 },
             }
        }
    }
}
